<template>
  <app-page>
    <div class="order_index">
      <div class="order_content">
        <OrderHeader/>
        <OrderTable v-if="orderstore.state.activetype == 0" @change="changesign" />
        <OrderTable2 v-else @change="changesign" />
      </div>
      <div class="order_footer">
        <div v-if="orderstore.state">
          <el-pagination
            v-model:current-page="orderstore.state.filterForm.page"
            v-model:page-size="orderstore.state.filterForm.page_size"
            :size="size"
            :disabled="disabled"
            :background="background"
            layout="total, prev, pager, next,sizes"
            :total="orderstore.state.orderListtotal"
            @size-change="orderstore.getorderList()"
            @current-change="orderstore.getorderList()"
          />
        </div>
      </div>
    </div>

    <OrderDialog />
    <ImgDialog v-model="imgdialogshow" :data="signdata"/>
  </app-page>
</template>

<script setup>
import { useOrderStore } from './order-store.js'
import OrderHeader from './components/OrderHeader.vue'
import OrderTable from './components/OrderTable.vue'
import OrderTable2 from './components/OrderTable2.vue'
import OrderDialog from './components/OrderDialog.vue'
import ImgDialog from "./components/ImgDialog.vue";

const orderstore = useOrderStore()
const imgdialogshow = ref(false)
const signdata = ref({})
provide('OrderStore', {
  orderStore: orderstore,
  orderState: orderstore.state,
})

const changesign = data => {
  if (data.type == 'openimg') {
    signdata.value = data.data
    imgdialogshow.value = true
  }
}
</script>

<style lang="scss" scoped>
.order_index {
  display: flex;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.order_content {
  width: 100%;
  height: calc(100% - 56px);
  background: #fff;
}

.order_footer {
  width: 100%;
  height: 56px;
  min-height: 56px;
  padding: 0 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.07);
}
</style>

<style>
.order_footer .el-pager li {
  margin-left: 8px;
  border-radius: 0;
}
.order_footer .el-pager li,
.order_footer .el-pagination__total,
.order_footer .el-pagination__sizes .el-select__selected-item{
  font-size: 14px;
  color: #333;
}
.order_footer .el-pager .is-active{
  color: var(--pcmain-color);
  border: solid 1px var(--pcmain-color);
  font-weight: 100;
}
.order_footer .el-pager li:last-child {
  margin-right: 8px;
}
</style>
